<template>
  <div class="question-add">
    <el-form
      ref="add_question"
      :model="query"
      :rules="rules"
      :inline="true"
      label-position="right"
      label-width="100px"
      size="small"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="学科方向" prop="subject_id">
            <el-select
              v-model="query.subject_id"
              placeholder="归属学科"
              clearable
            >
              <el-option
                v-for="item in treeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目录信息" prop="directory_id">
            <el-select
              v-model="query.directory_id"
              placeholder="归属目录"
              clearable
            >
              <el-option
                v-for="item in directoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签信息" prop="tag_id">
            <el-select
              v-model="query.tag_id"
              multiple
              placeholder="技能标签"
              clearable
            >
              <el-option
                v-for="item in tagList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="试题难度" prop="difficulty">
            <el-radio-group v-model="query.difficulty">
              <el-radio :label="1">简单</el-radio>
              <el-radio :label="2">中等</el-radio>
              <el-radio :label="3">较难</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="试题类型" prop="type">
            <el-select
              v-model="query.quest_type"
              placeholder="请选择题型"
              clearable
            >
              <el-option
                label="单选"
                :value="1"
              />
              <el-option
                label="多选"
                :value="2"
              />
              <el-option
                label="判断"
                :value="3"
              />
              <el-option
                label="简答"
                :value="4"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否面试真题" style="width: 250px;" prop="is_true_question">
            <el-radio-group v-model="query.is_true_question">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="题干信息" prop="question">
            <WangEdit
              v-model="query.question"
              ref-name="wangeditor"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="试题答案"
            prop="quest_answer"
          >
            <p v-if="query.quest_type===''">请选择试题类型，生成答案模板</p>

            <el-row v-if="query.quest_type===1">
              <!-- 单选 -----------------------------------------------------------------------！！！！！！！！！！！！！！！！--------->
              <el-table :data="query.quest_options" border>
                <el-table-column label="单选项" align="center" width="120">
                  <template slot-scope="scope">
                    <el-checkbox
                      v-model="query.quest_options[scope.$index].is_true"
                      @change="handleSelectionChange(query.quest_options, scope.row)"
                    >{{ scope.row.code }}</el-checkbox>
                  </template>
                </el-table-column>

                <el-table-column label="单选项内容" align="center" width="450">
                  <template slot-scope="scope">
                    <el-input
                      v-model="query.quest_options[scope.$index].content"
                      type="textarea"
                      placeholder="请输入信息"
                      rows="2"
                      size="normal"
                    />
                  </template>
                </el-table-column>

                <el-table-column label="选项图片" align="center" width="150">
                  <!-- <template slot-scope="scope">
                    <span>{{ scope.row }}</span>
                  </template> -->
                </el-table-column>

                <el-table-column label="操作" align="center" width="200">
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.$index ===query.quest_options.length - 1"
                      type="success"
                      icon="el-icon-plus"
                      size="medium"
                      align="center"
                      circle
                      @click="addTabList(query.quest_options)"
                    />

                    <el-button
                      v-if="scope.$index ===query.quest_options.length - 1"
                      type="danger"
                      icon="el-icon-delete"
                      size="medium"
                      align="center"
                      circle
                      @click="deleteTabList(query.quest_options)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <el-row v-if="query.quest_type===2">
              <el-table :data="query.quest_options" border>
                <el-table-column label="多选项" align="center" width="120">
                  <template slot-scope="scope">
                    <el-checkbox v-model="query.quest_options[scope.$index].is_true">{{
                      scope.row.code
                    }}</el-checkbox>
                  </template>
                </el-table-column>

                <el-table-column label="多选项内容" align="center" width="450">
                  <template slot-scope="scope">
                    <el-input
                      v-model="query.quest_options[scope.$index].content"
                      type="textarea"
                      placeholder="请输入信息"
                      rows="2"
                      size="normal"
                    />
                  </template>
                </el-table-column>

                <el-table-column label="选项图片" align="center" width="150">
                  <!-- <template slot-scope="scope">
                    <span>{{ scope.row }}</span>
                  </template> -->
                </el-table-column>

                <el-table-column label="操作" align="center" width="200">
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.$index === query.quest_options.length - 1"
                      type="success"
                      icon="el-icon-plus"
                      size="medium"
                      align="center"
                      circle
                      @click="addTabList(query.quest_options)"
                    />

                    <el-button
                      v-if="scope.$index === query.quest_options.length - 1"
                      type="danger"
                      icon="el-icon-delete"
                      size="medium"
                      align="center"
                      circle
                      @click="deleteTabList(query.quest_options)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-row>

            <el-row v-if="query.quest_type===3">
              <el-table :data="judge" border>
                <el-table-column label="判断题" width="900px">
                  <template slot-scope="scope">
                    <el-checkbox
                      v-model="scope.row.is_true"
                      @change="handleSelectionChange(judge,scope.row)"
                    >{{ scope.row.code }}</el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <el-row v-if="query.quest_type===4">
              <WangEdit
                v-model="query.quest_answer"
                ref-name="wangeditor1"
              />
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="答案解析">
            <WangEdit
              v-model="query.quest_remark"
              ref-name="wangeditor2"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item style="paddingLeft:100px">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="$emit('change')">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getEditdetail, addQuestion, editQuestion } from '@/api/exam/question'
import WangEdit from '@/components/WangEditor/index.vue'
const defaultItem = {
  subject_id: '',
  directory_id: '',
  tag_id: [],
  difficulty: '',
  is_true_question: '',
  quest_answer: '',
  quest_remark: '',
  quest_type: '',
  question: '',
  quest_options: [
    {
      code: 'A',
      content: '',
      is_true: null,
      pic: ''
    },
    {
      code: 'B',
      content: '',
      is_true: null,
      pic: ''
    },
    {
      code: 'C',
      content: '',
      is_true: null,
      pic: ''
    },
    {
      code: 'D',
      content: '',
      is_true: null,
      pic: ''
    }
  ]
}
export default {
  name: 'Addquestion',
  components: { WangEdit },
  props: {
    subject_detail: {
      type: Number
    }
  },
  data() {
    return {
      rules: {},
      query: { // 查询信息
        ...defaultItem
      },
      judge: [
        { code: '正确', content: '', is_true: false },
        { code: '错误', content: '', is_true: false }
      ]
    }
  },
  computed: {
    ...mapGetters({
      treeList: 'subject/treeList'
    }),
    directoryList() { // 目录信息
      if (!this.query.subject_id) {
        return []
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        // this.query.directory_id = ''
        const result = this.treeList.find(val => val.id === this.query.subject_id)
        return result.children
      }
    },
    tagList() { // 标签信息
      if (this.query.subject_id && this.query.directory_id) {
        // 取出一级
        const top = this.treeList.find(val => val.id === this.query.subject_id)
        // 取出二级
        const child = top.children.find(val => val.id === this.query.directory_id)
        return child.children
      } else {
        return []
      }
    }
  },
  created() {
    !this.treeList.length && this.loadTreeList()
    // console.log(this.subject_detail)
  },
  mounted() {},
  methods: {
    ...mapActions({
      loadTreeList: 'subject/loadTreeList'
    }),
    // 获取富文本内容
    getEditor(value) {
      console.log(value)
      this.query.question = value
    },
    async  onSubmit() {
      if ([1, 2].includes(this.query.quest_type)) {
        this.query.quest_answer = this.handleQuestionAnser(this.query.quest_options)
      } else if (this.query.quest_type === 3) {
        this.query.quest_options = this.judge
        this.query.quest_answer = this.handleQuestionAnser(this.judge)
      } else {
        this.query.quest_options = []
      }
      if (this.subject_detail) {
        await editQuestion({ ...this.query, id: this.subject_detail })
        this.$message.success('修改试题成功！')
      } else {
        await addQuestion(this.query)
        this.$message.success('添加试题成功！')
      }

      // this.$router.back()
      this.$emit('change')
      this.query = { ...defaultItem }
      // this.$message.success('添加试题成功！')
    },

    handleSelectionChange(arr, row) {
      arr.forEach(item => {
        // 排他,每次选择时把其他选项都清除
        if (item.code !== row.code) {
          item.is_true = false
        }
      })
    },
    addTabList(val) {
      if (val.length >= 6) {
        return this.$message.warning('添加成功！选项最多只能设置6个')
      }
      const listVal = {
        code: String.fromCharCode(65 + val.length),
        content: '',
        is_true: null,
        pic: ''
      }
      val.push(listVal)
    },
    deleteTabList(listVal) {
      if (listVal.length <= 2) {
        return this.$message.warning('删除失败！选项最少有2个')
      }
      listVal.pop()
    },
    async getEditdetail() {
      const { data } = await getEditdetail(this.subject_detail)
      this.query = data
      this.query.tag_id = data.tag_id.split(',')
      if (data.quest_type === 3) {
        this.judge = JSON.parse(data.quest_options)
      } else {
        this.query.quest_options = JSON.parse(data.quest_options)
      }
    },
    handleQuestionAnser(arr) {
      let str = ''
      arr.forEach(item => {
        console.log(1)
        if (item.is_true) {
          str += item.code
        }
      })
      return str
    }
  }
}
</script>

<style scoped lang="scss">
.question-add{
  background-color: #fff;
  padding: 20px;
  .el-form-item__content p{
   padding: 0;
   margin: 0;
  }
}
</style>
